<template>
	<div v-loading="loading">
		<Details v-model="info" :invoiceList="invoiceList"></Details>

		<div class="back">
			<el-button @click="back">返回</el-button>
		</div>
	</div>
</template>
<script>
	import { listByIds, delOss } from '@/api/system/oss';
	import * as apis from '@/api/finance/manage/paymentDetail/api.js';
	import Details from './chunk/details';
	export default {
		name: 'PaymentDetail',
		components: { Details },
		mixins: [],
		props: {},

		data() {
			return {
				loading: true,
				info: {},
				invoiceList: [],
			};
		},
		computed: {
			paymentId() {
				return this.$route.query.paymentId;
			},
		},
		watch: {},
		mounted() {
			this.getList();
			this.getInvoice();
		},
		methods: {
			back() {
				this.$tab.closeOpenPage(this.$route);
				// this._toPage({ path: '/finance/payment' });
				this._toPage({ name: 'Payment' });
			},
			getList() {
				this.loading = true;
				if (this.Empty(this.paymentId)) return;
				apis?.Info(this.paymentId)
					.then(res => {
						if (res.code == 200) {
							this.info = res.data ?? {};
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
			getInvoice() {
				if (this.Empty(this.paymentId)) return;
				let params = {
					paymentId: this.paymentId,
				};
				apis?.Invoice(params).then(async res => {
					if (res.code == 200) {
						this.invoiceList = res.rows;
						for (
							let index = 0;
							index < this.invoiceList.length;
							index++
						) {
							const element = this.invoiceList[index];
							if (element?.imgId) {
								await listByIds(element?.imgId).then(res => {
									element.__imgUrl = res.data?.[0]?.url ?? '';
								});
							}
						}
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.chunk {
		overflow: hidden;
		background-color: #fff;
		border-radius: 4px;
		padding: 15px;
		margin: 15px;
		box-sizing: border-box;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		.title {
			border-bottom: 1px solid #ccc;
			padding: 10px 0;
		}
		.container_detail {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			padding: 25px 0;
			gap: 25px;
			.item {
				display: flex;
				font-size: 16px;
				align-items: center;
				font-size: 14px;
				.label {
					margin-right: 15px;
					vertical-align: middle;
					color: #606266;
					font-weight: 700;
					width: 100px;
				}
				.content {
					line-height: 100%;
				}
			}
		}
		.container_invoice {
			display: flex;
			margin-bottom: 15px;
			.preview {
				flex: 1;
				// width: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				.container_preview {
					padding: 25px 0;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					// margin-top: 25px;
					width: 180px;
					.image {
						aspect-ratio: 16/9;
					}
					.handleBtn {
						display: flex;
						justify-content: space-around;
					}
				}
			}
			.container_detail {
				flex: 2;
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
	}
	.empty {
		font-size: 14px;
		text-align: center;
		padding: 20px;
	}
	.back {
		margin: 20px;
		background: #fff;
		padding: 15px 20px;
		display: flex;
		justify-content: flex-end;
	}
</style>
